


import React, { useCallback, useEffect, useMemo } from 'react'
import VCard from '../../../components/VCard'
import { getCostByTime, getVehicleCostList } from './service'
import { Spin } from 'antd'
import CountUp from 'react-countup'


interface costItemType{
  vehicle_id:string,
  cost:number
}
export default function VehicleCostStats() {

  const [costInfo,setCostInfo] = React.useState<costItemType[]>([]);
  // const PieOption = () => {
  //   return {
  //   title: {
  //     text: '车辆统计饼图',
  //     left: 'center'
  //   },
  //   tooltip: {
  //     trigger: 'item'
  //   },
  //   legend: {
  //     orient: 'vertical',
  //     left: 'left'
  //   },
  //   series: [
  //     {
  //       bottom: 'bottom',
  //       right: 'right',
  //       name: 'name',
  //       type: 'pie',
  //       radius: '50%',
  //       data: 
  //       fleetVehicleCount.map(item => {
  //           return {
  //             value: item.count,
  //             name: item.fleet_name
  //           }
  //         })
  //       ,
  //       emphasis: {
  //         itemStyle: {
  //           shadowBlur: 10,
  //           shadowOffsetX: 0,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
  //         }
  //       }
  //     }
  //   ]
  // }}
  // [{status:"本周",cost:100},{status:"本周",cost:100},{status:"本年",cost:100}]
  const [costOnTime,setCostOnTime] = React.useState<any[]>([{}])
  const [loading, setLoading] = React.useState(false)

  const columns=[
    {
      title: '车牌号',
      dataIndex: 'vehicle_id',
      search:true,
      ellipsis: true,

    },
    {
      title: '总费用',
      dataIndex: 'cost',
      sorter: (a: any, b: any) => a.cost - b.cost,
    },

  ]

  const queryList = async () => {
    setLoading(true)
    await getVehicleCostList().then(res => {
      setCostInfo(res.data.data)
    })
    await getCostByTime().then(res => {
      setCostOnTime(res.data.data)
    })
    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
      <div className="page-title-container">
        <div className="page-title">车辆费用统计</div>
      </div>
      <div className="page-content">
        {/* <VTable></VTable> */}
        {/* <VCard type="card"></VCard> */}
        <Spin spinning={loading}>
          <div className="VCard-list">
            <VCard type={'statisic'} title={'支出-'} dataSource={costOnTime}></VCard>
          </div>
          <div className="VCard-list">
          <VCard title={'出车信息'} type={'table'} columns={columns} dataSource={costInfo}></VCard>
          </div>
          {/* <div className="VCard-list">
            <VCard title={'车队车数统计图'} type={'pie'} dataSource={PieOption()}></VCard>
          </div> */}
      
        </Spin>
      </div>
    </div>
  )
}
